<template>
  <div class="container container_goods_list">
    <div class="mod_top_tabs_fixed">
      <div class="mod_top_tabs">
        <div class="item"></div>
        <div class="item"
            v-for="(item, index) in nav"
            :key="item.gt_id"
            :class="{current: index === activeIndex}"
            @click="activeNav(index)"
        >{{item.gt_title}}</div>
        <div class="item"></div>
      </div>
    </div>
    <div class="goods_list">
      <a class="good_item"
        hover-class="none"
          @click="gotoDetail(item)"
          v-for="item in listData"
          :key="item.goods_id">
        <div class="figure">
          <img :src="item.goods_img" alt="" class="pic" />
          <!-- <span v-if="item.is_hot === 1" class="mark orange">热门</span> -->
          <!-- <span v-else-if="item.is_recommend === 1" class="mark blue">推荐</span> -->
          <span v-if="item.show_label === '热门'" class="mark orange">热门</span>
          <span v-else-if="item.show_label === '推荐'" class="mark blue">推荐</span>
        </div>
        <div class="content">
          <div class="title">{{item.goods_title}}</div>
          <div class="desc" :class="{desc_one : item.goods_title.length> 12}">
            {{item.goods_info}}
          </div>
          <div class="price" v-if="item.is_appointment != 1">&yen;{{item.price}}</div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import fly from '@/utils/fly'
import { reportData } from '@/utils/report'

export default {
  data () {
    return {
      nav: [],
      activeIndex: '',
      activeTypeId: '',
      listData: [],
      hasNext: true,
      canLoadMore: true,
      pageStart: 0,
      pageSize: 15,
      from: ''
    }
  },
  computed: {},
  methods: {
    async activeNav (i, id) {
      if (this.activeIndex === i) {
        return
      }
      this.activeIndex = i
      this.activeTypeId = this.nav[i].gt_id
      this.listData = []
      this.pageStart = 0
      this.getList()
    },
    async getList () {
      this.canLoadMore = false
      let res
      if (this.activeTypeId === -1) {
        res = await fly.post(`Goods/list?is_hot=1&limit=${this.pageStart},${this.pageStart + this.pageSize}`)
      } else {
        res = await fly.post(`Goods/list?gt_id=${this.activeTypeId}&limit=${this.pageStart},${this.pageStart + this.pageSize}`)
      }
      if (res && res.code === 200 && res.data) {
        this.listData = this.listData.concat(res.data.list)
        this.pageStart += this.pageSize
        this.hasNext = res.data.page.totalcount > this.pageStart
      } else {
        wx.showToast({
          title: '数据异常',
          icon: 'none'
        })
      }
      this.canLoadMore = true

      reportData({
        funcx: '商城列表',
        keyx: this.nav[this.activeIndex].gt_title,
        from: this.from
      })
      this.from = ''
    },
    gotoDetail (item) {
      if (item.gt_id === 3) {
        wx.navigateTo({
          url: '/pages/detail/main?id=' + item.r_id
        })
      } else {
        wx.navigateTo({
          url: '/pages/goods-detail/main?id=' + item.goods_id
        })
      }
    }
  },
  async onLoad (options) {
    // wx.showLoading({
    //   title: '加载中'
    // })
    // let res = await fly.post('GoodsType/list')
    // wx.hideLoading()
    // if (res && res.code === 200 && res.data) {
    this.nav = [{
      'gt_id': -1,
      'gt_title': '热门'
    }, {
      'gt_id': 2,
      'gt_title': '门票'
    }, {
      'gt_id': 3,
      'gt_title': '讲解'
    }, {
      'gt_id': 1,
      'gt_title': '线路游'
    }, {
      'gt_id': 5,
      'gt_title': '体验'
    }]
    this.activeNav(0)
    // } else {
    //   wx.showToast({
    //     title: '数据异常',
    //     icon: 'none'
    //   })
    // }

    let scene = decodeURIComponent(options.scene || '')
    let _from = scene.replace('?', '').replace(/&id=\d+/, '').replace(/^id=\d+/, '')

    this.from = _from
  },
  onPullDownRefresh () {},
  onReachBottom () {
    if (this.hasNext && this.canLoadMore) {
      this.getList()
    }
  },
  onShow () {
    try {
      var value = wx.getStorageSync('couponDetail')
      if (value === '1') {
        this.activeNav(0)
        wx.setStorageSync('couponDetail', '0')
      }
    } catch (e) {

    }
  }
}
</script>

<style lang="scss">
  @import './goods-list.scss';
</style>
